<template>
    <div class="nav-bar" :style="'top: '+y+'px;left: '+x+'px'">
        <div class="route-btn" :class="isUnfold?'route-show':'route-hidden'">
            <router-link to="/">
                <van-icon name="home-o" />
            </router-link>
            <router-link to="/cart">
                <van-icon name="shopping-cart-o" />
            </router-link>
            <router-link to="/usercenter">
                <van-icon name="user-o" />
            </router-link>
        </div>
        <p class="control-btn" @click="onChange" @touchmove="onMove" @touchstart="onMoveStart" id="control-btn">
            <i class="iconfont" :class="isUnfold?'icon-diejia':'icon-zhediexia-copy'" id="control-icon"></i>
        </p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isUnfold:false,
            coordinate: {
                client: {},
                elePosition: {}
            },
            x:0,
            y:300
        }
    },
    methods:{
        onChange(){
            this.isUnfold = !this.isUnfold
        },
        onMove(e){
            let element = e.targetTouches[0]
            // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
            let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
            let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
            // 限制可移动距离，不超出可视区域
            x = x <= 0 ? 0 : x >= innerWidth - e.target.offsetWidth ? e.target.offsetWidth : x
            y = y <= 0 ? 0 : y >= innerHeight - e.target.offsetHeight ? innerHeight - e.target.offsetHeight : y
            this.x = x
            this.y = y
            // console.log(this.x,this.y);
        },
        onMoveStart(e){
            let element = e.targetTouches[0]
            // 记录点击的坐标
            this.coordinate.client = {
                x: element.clientX,
                y: element.clientY
            }
            // 记录需要移动的元素坐标
            this.coordinate.elePosition.left = this.x
            this.coordinate.elePosition.top = this.y
        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#FFFFFF;
    .nav-bar{
        position: fixed;
        font-size: 1.2rem;
        .control-btn{
            width: 2.5rem;
            height: 2.5rem;
            background: $green;
            color:$white;
            border-radius: 50%;
            text-align: center;
            line-height: 2.5rem;
        }
        .route-btn{
            width: 2.5rem;
            background: $green;
            margin-bottom: 0.5rem;
            border-radius: 2rem/1.4rem;
            position: absolute;
            bottom: 2.6rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            overflow: hidden;
            .van-icon{
                color: $white;
                font-size: 1.2rem;
            }
        }
        .route-show{
            height: 6rem;
            transition: all 1s;
        }
        .route-hidden{
            height: 0;
            transition: all 1s;
        }
    }
</style>